<template>
  <div class="app-container" v-permission="['system:menu:query']">
    <!-- 菜单查询(过滤) -->
    <el-card>
      <el-form size="small" :inline="true">
        <el-form-item label="过滤条件">
          <el-input
            v-model="keywords"
            placeholder="请输入过滤条件"
            clearable
          />
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 树形表格 -->
    <el-card style="margin-top: 3px">
      <!-- 工具条 -->
      <div style="margin-bottom: 10px">
        <el-button
          v-permission="['system:menu:add']"
          type="primary"
          icon="el-icon-plus"
          @click="toAdd(null)"
        >
          新增
        </el-button>
      </div>
      <!-- 菜单表格 -->
      <el-table
        v-loading="loading"
        :data="tableTree"
        :expand-row-keys="expandRow"
        row-key="menuId"
        border
        :tree-props="{children:'children',hasChildren:'hasChildren'}"
      >
        <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="200px"/>
        <el-table-column prop="icon" label="图标" align="center" width="65px">
          <template slot-scope="{row}">
            <svg-icon
              slot="prefix"
              :icon-class="row.icon"
              class="el-input__icon"
              style="height: 32px;width: 16px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" align="center" width="65px"/>
        <el-table-column prop="path" label="路由地址" align="center"/>
        <el-table-column prop="component" label="组件路径" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="perms" label="权限标识" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="status" label="状态" align="center" width="80px">
          <template slot-scope="{row}">
            <dict-tag :value="row.status" :data-list="statusOptions"/>
          </template>
        </el-table-column>
        <el-table-column prop="menuType" label="类型" align="center" width="80px">
          <template slot-scope="{row}">
            <dict-tag :value="row.menuType" :data-list="menuTypeList"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="100px">
          <template slot-scope="{row}">
            <el-dropdown class="handle-button">
              <span class="el-dropdown-link">
                <el-link icon="el-icon-s-operation" type="primary">
                  操作
                  <i class="el-icon-arrow-down el-icon--right"/>
                </el-link>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button v-permission="['system:menu:update']"
                             size="mini" type="text" icon="el-icon-edit" @click="toUpdate(row)">修改
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button v-permission="['system:menu:add']"
                             size="mini" type="text" icon="el-icon-plus"
                             :disabled="row.menuType===2" @click="toAdd(row)">新增
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button v-permission="['system:menu:remove']"
                             size="mini" type="text" icon="el-icon-delete"
                             :disabled="('children' in row) && row.children.length !== 0"
                             @click="doDelete(row)">删除
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加菜单的弹出框 -->
    <el-dialog
      :title="title" center width="60%"
      :visible.sync="addDialog"
      v-if="addDialog"
      @before-close="closeDialog">
      <sys-menu-add
        @after="loadAllMenu"
        :active-obj="activeObj"
        @close="closeDialog"/>
    </el-dialog>
    <!-- 修改菜单的弹出框 -->
    <el-dialog
      :title="title" center width="60%"
      :visible.sync="updateDialog"
      v-if="updateDialog"
      @before-close="closeDialog">
      <sys-menu-update
        @after="loadAllMenu"
        :active-obj="activeObj"
        @close="closeDialog"/>
    </el-dialog>
  </div>
</template>

<script>
import sysMenuApi from "@/api/system/sysMenu";
import sysMenuAdd from './sys-menu-add'
import sysMenuUpdate from './sys-menu-update'


export default {
  name: "sys-menu-list",
  components: {
    sysMenuAdd,
    sysMenuUpdate
  },
  data() {
    return {
      // 菜单表格数据过滤关键字
      keywords: null,
      // // 菜单表格数据
      // tableTree: null,
      // 展开的数据行
      expandRow: [],
      // 状态集合
      statusOptions: [],
      // 菜单类型集合
      menuTypeList: [],
      // 菜单数据
      menuList: [],
      // 进度条
      loading: false,
      // 弹出框标题
      title: "",
      // 是否打开添加的弹出层
      addDialog: false,
      // 是否打开修改的弹出层
      updateDialog: false,
      // 当前行对象
      activeObj: {},
    }
  },
  created() {
    this.getDataByType("sys_status_type").then(res => {
      this.statusOptions = res.data
    })
    this.getDataByType("sys_menu_type").then(res => {
      this.menuTypeList = res.data
    })
    this.loadAllMenu()
  },
  computed: {
    tableTree: function () {
      let searchValue = this.keywords;
      if (searchValue) {
        let treeData = this.menuList
        let handleTreeData = this.handleTreeData(treeData, searchValue)
        this.setExpandRow(handleTreeData)
        this.expandRow = this.expandRow.join(",").split(",")
        return handleTreeData
      }
      return this.menuList
    }
  },
  methods: {
    // 加载所有菜单
    loadAllMenu() {
      this.loading = true
      sysMenuApi.listMenu().then(res => {
        this.menuList = res.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 添加菜单
    toAdd(row) {
      this.activeObj = row
      this.addDialog = true
      this.title = "添加菜单"
    },
    // 修改菜单
    toUpdate(row) {
      this.activeObj = row
      this.updateDialog = true
      this.title = `修改${row.menuName}菜单`
    },
    // 删除
    doDelete(row) {
      this.$confirm(`此操作将删除${row.menuName}这个菜单，是否继续？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sysMenuApi.deleteById(row.menuId).then(res => {
          this.$message.success(res.msg)
          this.loadAllMenu()
        })
      })
    },
    // 树形表格过滤
    handleTreeData(treeData, searchValue) {
      if (!treeData || treeData.length === 0) {
        return []
      }
      const array = []
      for (let i = 0; i < treeData.length; i += 1) {
        let match = false
        for (let pro in treeData[i]) {
          if (typeof (treeData[i][pro]) == 'string') {
            match |= treeData[i][pro].includes(searchValue);
            if (match) break;
          }
        }
        if (this.handleTreeData(treeData[i].children, searchValue).length > 0 || match) {
          array.push({
            ...treeData[i],
            children: this.handleTreeData(treeData[i].children, searchValue)
          })
        }
      }
      return array
    },
    // 将过滤好的树形结构展开
    setExpandRow(handleTreeData) {
      if (handleTreeData.length) {
        for (let i of handleTreeData) {
          this.expandRow.push(i.menuId)
          if (i.children.length) {
            this.setExpandRow(i.children)
          }
        }
      }
    },
    // 关闭所有弹出框
    closeDialog() {
      this.addDialog = false
      this.updateDialog = false
    }
  }
}
</script>

<style scoped>

</style>
